<template>
  <transition name="slide">
    <div class="search">
      <!-- 搜索框 -->
      <div class="search-box">
        <div class="search-main">
          <input
            placeholder="一起来听歌吧~"
            v-model="searchMsg"
            ref="searchMsg"
          />
          <i class="icon-dismiss" @click="clearMsg" v-if="searchMsg"></i>
        </div>
        <i class="icon-back" @click="back"></i>
      </div>
      <!-- 搜索结果 -->
      <user-search :searchMsg="searchMsg"></user-search>
      <scroll
        ref="scroll"
        class="wrapper"
        :probeType="probeType"
        :listenScroll="listenScroll"
      >
        <div class="content">
          <!-- 搜索历史 -->
          <div class="historySearch" v-show="historySearch.length > 0">
            <h1 class="title">
              <span class="text">搜索历史</span>
              <span class="clear" @click="showConfirm">
                <i class="icon-clear"></i>
              </span>
            </h1>
            <ul class="historyItems">
              <li
                v-for="(item, index) in historySearch"
                :key="index"
                class="historyItem"
                @click="addHistory(item)"
              >
                {{ item }}
              </li>
            </ul>
          </div>
          <!-- 热门搜索 -->
          <div class="hotSearch">
            <h4>热门搜索</h4>
            <ul>
              <li
                v-for="(item, index) in hotSearch"
                :key="item.k"
                @click="addHistory(item.k)"
              >
                <span class="index" :class="index <= 2 ? 'hotIndex' : ''">{{
                  index + 1
                }}</span>
                <span class="name" :class="index <= 2 ? 'hotName' : ''">{{
                  item.k
                }}</span>
                <span class="num" :class="index <= 2 ? 'hotNum' : ''">{{
                  item.n
                }}</span>
              </li>
            </ul>
          </div>
        </div>
      </scroll>
      <Confirm
        ref="confirm"
        text="是否清空搜索历史"
        confirmBtnText="清空"
        @confirm="clearSearchHistory"
      ></Confirm>
    </div>
  </transition>
</template>

<script>
// import HotSearch from '@/components/search/HotSearch'
import Confirm from '@/components/base/Confirm'
import UserSearch from '@/components/base/UserSearch'
import Scroll from '@/components/base/Scroll'
export default {
  components: {
    Confirm,
    UserSearch,
    Scroll
  },
  data () {
    return {
      probeType: 3,
      listenScroll: true,
      searchMsg: '',
      hotSearch: [],
      historySearch: JSON.parse(localStorage.getItem('historySearch')) || []
    }
  },
  methods: {
    // 清除搜索框内容
    clearMsg () {
      this.searchMsg = ''
    },
    // 返回之前页面
    back () {
      this.$router.back(-1)
      this.clearMsg()
    },
    showConfirm () {
      this.$refs.confirm.show()
    },
    // 清除历史记录
    clearSearchHistory () {
      this.historySearch = []
      localStorage.setItem('historyQuery', JSON.stringify(this.historySearch))
    },
    // 获取热搜歌曲
    async getHotSearch () {
      const {
        data: { data: res }
      } = await this.$http.get('/api/search/hot')
      this.hotSearch = res
    },
    // 添加搜索历史
    addHistory (item) {
      // 正则表达式写法
      // this.query = query.replace(/\s+/g,"")
      this.searchMsg = item
    }
  },
  mounted () {
    this.getHotSearch()
  },
  activated () {
    this.searchMsg = ''
    this.historySearch = JSON.parse(localStorage.getItem('historySearch')) || []
  }
}
</script>

<style lang="stylus" scoped>
@import '../common/stylus/variable'

.slide-enter,.slide-leave-to {
  transform: translateX(100%);
}
.slide-enter-active,.slide-leave-active{
  transition: all 0.5s ease;
}
.search {
  position:fixed;
  top:0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: $color-background;
  z-index: 10;
  .search-box {
    display: flex;
    position:relative;
    margin: 20px;
    padding-right:40px;
    height: 40px;
    align-items: center;
    .search-main {
      display: flex;
      width: 100%;
      height: 100%;
      padding: 0 20px;
      background: #333;
      input {
        flex: 1;
        font-size: 14px;
        height: 100%;
        outline: none;
        background: none;
        // 解决双击弹出错误
        touch-action: none;
      }
      .icon-dismiss {
        line-height:40px;
        padding: 0 6px;
        font-size: 16px;
        color: #222;
      }
    }
    .icon-back {
      position: absolute;
      right: 6px;
      top: 8px;
      transform: rotate(180deg);
      font-size: 24px;
      color: #ffcd32;
    }
  }
  .historySearch {
    padding: 0 20px;
    .title {
      display:flex;
      justify-content:space-between;
      align-items:center;
      color: #ccc;
      line-height:20px;
      font-size: 14px;
    }
    .historyItems {
      display: flex;
      flex-direction:row;
      flex-wrap:wrap;
      // justify-content:center;
      align-items:center;
      margin-top:4px;
      padding: 0 30px;
      line-height: 28px;
      .historyItem {
        flex: 32% 0 1;
        text-align:center;
        text-overflow:ellipsis;
        white-space:nowrap;
        overflow:hidden;
      }
    }
  }
  .hotSearch {
    padding: 0 20px;
    font-size: 14px;
    color: #6d6d6d;
    h4 {
      line-height: 30px;
      color: #ccc;
    }
    li {
      display: flex;
      line-height:30px;
      .index {
        width: 40px;
        padding-right:20px;
      }
      .name {
        flex: 1;
      }
      .hotIndex, .hotName, .hotNum {
        font-size: 18px;
        color: #d93f30;
      }
    }
  }
  .searchResult {
    position: fixed;
    width: calc( 100% - 40px);
    box-sizing: border-box;
    margin: 0 20px;
    padding: 20px;
    background-color: #333;
    z-index: 2;
    .ItemName {
      line-height: 20px;
      color: $color-theme;
      font-size: 16px;
    }
    .Items {
      display: flex;
      flex-direction: row;
      align-items:center;
      padding: 6px;
      img {
        width: 40px;
        height: 40px;
        // border-radius: 6px;
        margin-right:20px;
      }
      h3 {
        font-size: 14px;
        color: $color-theme;
        opacity: .8;
        margin-right: 20px;
        white-space: nowrap;
      }
      span {
        font-size: 14px;
        color: #6d6d6d;
      }
    }
    .noResult {
      padding: 10px;
      font-size: 14px;
    }
  }
  .wrapper {
    position:fixed;
    width: 100%;
    height: calc( 100% - 80px );
    overflow: hidden;
  }
}
</style>
